<script setup>
const props = defineProps({
  data: {
    type: Object,
    default: () => {
      return {}
    }
  },
  callback: {
	  type: Function,
	  default: () => {}
  }
})

</script>

<template>
  <view class="order-item-com-box" @click="callback(data.leftText1)">
	  <view class="top-box">
		  <view class="order_sn-box">
			  <view class="label">订单号: </view>
			  <view class="order_sn">{{data.order_sn}}</view>
		  </view>
		  <view class="status">{{data.statusText}}</view>
	  </view>
    <view class="center-box">
		<view class="avatar"><image class="img" :src="data.list[0].images" mode=""></image></view>
		<view class="price-icon">
			<view class="price">{{data.price}}</view>
			<view class="iconfont icon-youjiantou"></view>
		</view>
	</view>
	<view class="bottom-box">
		<view class="label">更多</view>
		<view class="time">{{data.createtime}}</view>
	</view>
  </view>
</template>

<style lang="scss" scoped>
.order-item-com-box {
	width: 630rpx;
	.top-box{
		@include flex(row,space-between,center);
		padding-bottom: 30rpx;
		.order_sn-box{
			flex-grow: 1;
			@include flex(row,flex-start,center);
			@include ellipse();
		}
		.status{
			
		}
	}
	.center-box{
		@include flex(row,space-between,center);
		padding: 30rpx 0;
		
		.avatar{
			width: 130rpx;
			height: 180rpx;
			padding: 8rpx;
			border-radius: 6rpx;
			border: 1px solid var(--borderColor);
			.img{
				width: 130rpx;
				height: 180rpx;
			}
		}
		.price-icon{
			@include flex();
			.price{
				color: #9e9e9e;
				margin-right: 10rpx;
			}
			.iconfont{
				color: #9e9e9e;
				font-size: 24rpx;
			}
		}
	}
	.bottom-box{
		@include flex(row,space-between,center);
		padding-top: 30rpx;
		border-top: 1px solid var(--borderColor);
	}
}
</style>
